<template>
  <a-skeleton :loading="loading" active :title="false" :paragraph="{ rows: 2, width: '100%' }">
    <a-card hoverable :bordered="false">
      <a-input-search
        v-model:value="searchKey"
        @change="searchDept"
        allowClear
        placeholder="输入部门名称"
        style="margin-bottom: 8px"
      />
      <div class="tree-container">
        <a-directory-tree
          :show-icon="false"
          :load-data="onLoadData"
          :tree-data="treeData"
          :expandAction="false"
          v-model:selectedKeys="selectedKeys"
          :field-names="replaceFields"
          @click="handleExpand"
        >
        </a-directory-tree>
      </div>
    </a-card>
  </a-skeleton>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted, toRaw } from 'vue';
  import { getDeptsApi } from '/@/api/dept';
  import { deptTreeNodeId, reload } from './index';

  const replaceFields = {
    children: 'children',
    title: 'name',
    key: 'id',
  };

  const hasLeaf = (list: Array<any>) => {
    list.forEach((item) => {
      if (item.leaf) {
        item.isLeaf = item.leaf;
      }
    });
    return list;
  };

  export default defineComponent({
    components: {},
    setup() {
      const loading = ref<boolean>(true);
      const treeData = ref<any>([]);
      const selectedKeys = ref<string[]>([]);

      const onLoadData = (treeNode: any) => {
        return new Promise((resolve: (value?: unknown) => void) => {
          if (treeNode.dataRef.children) {
            resolve();
            return;
          }
          setTimeout(async () => {
            let res = await getDepts({ pid: treeNode.dataRef.id });
            treeNode.dataRef.children = hasLeaf(res || []);
            resolve();
          }, 200);
        });
      };

      const handleExpand = async (_event, treeNode) => {
        const { id } = toRaw(treeNode.dataRef);
        deptTreeNodeId.value = id;
        reload.value = !reload.value;
      };

      const getDepts = async (params: object) => {
        try {
          let res = await getDeptsApi({ ...params, sort: 'id,desc' });
          const data = hasLeaf(res?.content || []);
          return data;
        } catch (error) {}
      };

      const searchKey = ref('');
      const searchDept = async () => {
        treeData.value = await getDepts({ name: searchKey.value });
      };

      onMounted(async () => {
        setTimeout(async () => {
          loading.value = false;
        }, 300);
        treeData.value = await getDepts({});
      });

      return {
        loading,
        treeData,
        replaceFields,
        selectedKeys,
        onLoadData,
        searchKey,
        searchDept,
        handleExpand,
      };
    },
  });
</script>
<style lang="less" scoped>
  .tree-container {
    overflow: auto;
    height: calc(100vh - 165px);
  }
  .tree-container::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .tree-container::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  .tree-container::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #979797;
  }

  :deep(.ant-card-body) {
    padding: 12px 6px;
  }

  :deep(.ant-tree-treenode) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
